<template>
    <div  v-text="message"></div> 
     <!-- v-test渲染dom元素的文本内容，如果其中内容包含有HTML标签，那么浏览器不会对其进行解析 -->
     <div v-html="html"></div>
     <!-- v-html进行渲染时，内容包括HTML标签可以被浏览器解析 -->
      <p><input type="text" v-bind:placeholder="username"></p>
      <p><input type="password" v-bind:placeholder="password"></p>
      <!-- <标签名 v-bind:属性名="数据名"></标签名> -->
       <button @click="showInfo">输出信息</button>
       请输入姓名：<input type="text" v-model="username1">
       <div>姓名是：{{ username1 }}</div>
       <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = {{ n1 + n2 }}
       <!-- v-model.number将输入框中的内容转换为数字类型 --> 
       <div>当前等级为：</div>
        <p v-if="type==='A'">优秀</p>
        <!-- v-if直接给定一个条件，控制单个元素的显示或隐藏，当条件满足时，显示内容 -->
        <p v-else-if="type==='B'">良好</p>
        <p v-else>差</p>
        <button @click="type='A'">切换成优秀</button>
        <button @click="type='B'">切换成良好</button>
        <button @click="type='C'">切换成差</button>

        <p v-if="flag">通过v-if控制的元素</p>
        <p v-show="flag">通过v-show控制的元素</p>
        <button @click="flag=!flag">显示/隐藏</button>

        <!-- 数列渲染 -->
        <div v-for="(item, index) in list" :key="index">
            索引是:{{index}}---元素内容是:{{item}}</div>

        <div v-for="item in list1" :key="item.id">
            id是:{{item.id}}---元素内容是:{{item.message}}</div>

            <div v-for="(value, name) in user" :key="name">
            属性名是:{{name}}---属性值是:{{value}}</div>
</template>

<script setup>
      import { ref ,reactive} from 'vue'
     const message = '<span>咬定青山不放松</span>';
     const html = '<strong>咬定青山不放松</strong>';
     const username = '请输入用户名';
     const password = '请输入密码';
     const showInfo=()=>{
         console.log('  欢迎来到vue.js世界')
     }
     const username1 = ref('zhangsan')
     const n1=ref(1)
     const n2=ref(2)

     const type=ref('B')

     const flag=ref(true)

     const list=reactive(['HEML','CSS','JavaScript'])

     const list1=reactive([
        {id:1,message:'梅'},{id:2,message:'张'},
        {id:3,message:'王'},{id:4,message:'李'},
     ])

     const user=reactive({id:11,name:'张三',gender:'男'})
</script>


<style lang="scss" scoped>

</style>